<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 平台用户
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-switch v-model="query.isStatus" class="handle-switch mr40" @change="func_switch_load"
                    placeholder="启用状态" active-value="2002" inactive-value="" active-text="有效用户" inactive-text="全部用户" >
                </el-switch>
                <el-input v-model="query.keyword" placeholder="用户名" class="handle-input mr10"/>
                <el-button type="primary" icon="el-icon-search" @click="func_handleSearch" plain>搜索</el-button>
                <el-button type="danger" icon="el-icon-search" @click="func_handleDelBut" class="mr10" plain>删除</el-button>
                <el-dropdown :hide-on-click="false">
                    <el-button class="mr10" plain>操作</el-button>
                    <template #dropdown>
                        <el-dropdown-menu >
                        <el-dropdown-item class="blue" icon="el-icon-edit" @click="func_handleAddBut">新建</el-dropdown-item>
                        <el-dropdown-item class="green" icon="el-icon-circle-check" @click="func_handleActiveBut">启用</el-dropdown-item>
                        <el-dropdown-item class="red" icon="el-icon-circle-close" @click="func_handleUnActiveBut">停用</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <el-table :data="memberTableData" border class="table" ref="multipleTable" 
            v-loading="isLoading" element-loading-background = "rgba(255, 255, 255, .5)" element-loading-text = "加载中，请稍后..." element-loading-spinner = "el-icon-loading"
            @selection-change="(selections)=>{func_handleSelectionChange(selections,'true')}"
            @select-all="(selections)=>{func_handleSelectionAll(selections,'true')}"
            header-cell-class-name="table-header" default-expand-all >
                <el-table-column type="selection" width="50" align="center"/>
                <el-table-column prop="id" label="ID" width="55" align="center" v-if="false" />
				<el-table-column label="序号" width="80" align="center"><template #default="scope">
						{{scope.$index + 1}}
				</template></el-table-column>
                <el-table-column prop="username" label="用户名" align="center">
                    <template #default="scope">
                        <el-button type="text" icon="el-icon-s-unfold" @click="func_handleDrawerOpen(scope.$index, scope.row)">{{scope.row.username}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" v-if="false" label="手机号" align="center"/>
                <el-table-column prop="strPhone" label="手机号" align="center"/>
                <el-table-column label="性别" align="center">
                    <template #default="scope">
                        <p v-if="scope.row.gender == 0"><el-tag size="small" type="info" effect="dark">女</el-tag></p>
                        <p v-if="scope.row.gender == 1"><el-tag size="small" type="primary  " effect="dark">男</el-tag></p>
                    </template>
                </el-table-column>
                
                <el-table-column prop="createTime" label="注册时间" align="center"/>
                <el-table-column prop="strIssys" label="用户身份" align="center">
                    <template #default="scope">
                        <p v-if="scope.row.issys == 0"><el-tag size="small" type="info" effect="dark">{{scope.row.strIssys}}</el-tag></p>
                        <p v-if="scope.row.issys == 1"><el-tag size="small" type="warning" effect="dark">{{scope.row.strIssys}}</el-tag></p>
                        <p v-if="scope.row.issys == 2"><el-tag size="small" type="success" effect="dark">{{scope.row.strIssys}}</el-tag></p>
                    </template>
                </el-table-column>
                <el-table-column prop="strStatus" label="用户状态" align="center">
                    <template #default="scope">
                        <p v-if="scope.row.status">
                            <p v-if="scope.row.status == 2001"><el-tag size="small" type="success" effect="dark">{{scope.row.strStatus}}</el-tag></p>
                            <p v-if="scope.row.status == 2002"><el-tag size="small" type="warning" effect="dark">{{scope.row.strStatus}}</el-tag></p>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <p v-if="scope.row.isDel">
                            <el-button type="text" icon="el-icon-edit" class="red" @click="func_handleRecycling(scope.$index, scope.row)">恢复</el-button>
                        </p>
                        <p v-if="!scope.row.isDel">
                            <el-button type="text" icon="el-icon-edit" @click="func_handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button v-if="scope.row.status == 2002" type="text" icon="el-icon-delete" class="red" @click="func_handleDelete(scope.$index, scope.row)">删除</el-button>
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @size-change="func_handleSizeChange" @current-change="func_handlePageChange"
                background layout="total, sizes, prev, pager, next," 
                        :current-page="query.pageNum"
                        :page-sizes=[10,50,100]
                        :page-size="query.pageSize"
                        :total="total" >
                </el-pagination>
            </div>
        </div>
        <!-- 详细抽屉 -------------------------------------------------------------------------------------------------------------- -->
        <el-drawer title="详细信息" v-model="view_memberDrawer" direction="rtl" size="55%">
            <el-tabs v-model="drawerTabs" type="border-card" @tab-click="func_drawer_tabsClick" >
                <!-- #1. 用户说明 --------------------------------------------------------------------------------------------------- -->
                <el-tab-pane label="用户说明" name="member" :key="'member'" >
                    <el-descriptions class="margin-top" title="头像" direction="vertical" :column="1">
                        <el-descriptions-item ><el-image :src="memberDrawerForm.icon" /></el-descriptions-item> 
                    </el-descriptions>
                    <el-descriptions class="margin-top" title="基础信息" :column="2" border style="margin-top:10px">
                        <template #extra>
                        <el-button type="primary">Operation</el-button>
                        </template>
                        <el-descriptions-item>
                            <template #label> <div class="cell-item">  管理员名称 </div> </template> {{memberDrawerForm.id}} / {{memberDrawerForm.username}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label> <div class="cell-item">  手机号/ 登陆账号 </div> </template> {{memberDrawerForm.strPhone}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label> <div class="cell-item">  帐号状态 </div> </template> {{memberDrawerForm.strStatus}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label> <div class="cell-item"> Remarks </div> </template> 
                            <el-tag size="small" class="mr10">{{memberDrawerForm.strIssys}}</el-tag>
                            <el-tag size="small" class="mr10">{{memberDrawerForm.strStatus}}</el-tag>
                            <el-tag size="small" class="mr10">VIP:{{memberDrawerForm.strOpenVIP}}</el-tag>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions class="margin-top" title="扩展信息" direction="vertical" :column="6" border style="margin-top:10px">
                        <el-descriptions-item label="昵称">{{memberDrawerForm.nickname}}</el-descriptions-item>
                        <el-descriptions-item label="生日">{{memberDrawerForm.birthday}}</el-descriptions-item>
                        <el-descriptions-item label="性别">{{memberDrawerForm.gender}}</el-descriptions-item>
                        <el-descriptions-item label="城市">{{memberDrawerForm.city}}</el-descriptions-item>
                        <el-descriptions-item label="职位">{{memberDrawerForm.job}}</el-descriptions-item>
                        <el-descriptions-item label="信息来源">{{memberDrawerForm.sourceType}}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions class="margin-top" title="关联账号" direction="vertical" :column="1" border style="margin-top:10px">
                    <el-descriptions-item label="微信">{{memberDrawerForm.wechatOpenId}}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions class="margin-top" title="系统信息" direction="vertical" :column="3" border style="margin-top:10px">
                        <el-descriptions-item label="创建时间" >{{memberDrawerForm.createTime}}</el-descriptions-item>
                        <el-descriptions-item label="创建人" >{{memberDrawerForm.createTime}}</el-descriptions-item>
                        <el-descriptions-item label="最后一次编辑时间" >{{memberDrawerForm.createTime}}</el-descriptions-item>
                    </el-descriptions>
                </el-tab-pane>
                <!-- ------------------------------------------------------------------------------------------------------------ -->
                <!-- #2. 关联角色查询 -------------------------------------------------------------------------------------------- -->
                <el-tab-pane label="关联角色" name="role" :key="'role'">
                    <!-- <div style="padding: 14px;">
                        <div class="handle-box">
                            <el-input v-model="query.keyword" placeholder="角色名称" class="handle-input mr10"/>
                            <el-button type="primary" icon="el-icon-search" @click="func_handleRoleSearch">搜索</el-button>
                        </div>
                    </div> -->
                    <el-table :data="memberRoleTableData" border class="table" :max-height="650" fit header-cell-class-name="table-header">
                        <el-table-column prop="id" label="ID" width="55" align="center"/>
                        <el-table-column label="识别码" v-if="false">
                            <template #default="scope">
                            {{scope.row.id}}, {{scope.row.sid}},{{scope.row.usid}},{{scope.row.uisAdmin}},{{scope.row.ustatus}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="角色名"/>
                        <el-table-column prop="description" label="角色描述"/>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-drawer>
        <!-- ---------------------------------------------------------------------------------------------------------------------- -->
        <!-- 编辑弹出框 ------------------------------------------------------------------------------------------------------------ -->
        <el-dialog title="编辑管理员" v-model="editDialogVisible" width="55%" :close-on-click-modal="false">
            <VSysMember v-bind:selectValue="VMemberData" @SysMemberData="func_loadVMemberData" />
        </el-dialog>
        <!-- ---------------------------------------------------------------------------------------------------------------------- -->
    </div>
</template>

<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchMemberData, fetchMemberInfoData, fetchMemberRoles, batchDelMember, batchRecMember, batchActMember } from "../../api/uc";
import { ERROR_CHOOSE_DEL_MEMBER_EMPTY, ERROR_CHOOSE_REC_MEMBER_EMPTY, ERROR_CHOOSE_ACT_MEMBER_EMPTY, ERROR_CHOOSE_UNACT_MEMBER_EMPTY, ERROR_CHOOSE_VIEW_MEMBER_EMPTY,
SUCCMESS_DIALOG_MESSAGE, FAILD_DIALOG_MESSAGE} from "../../api/messages";

import VSysMember from "./components/ucMemberForm.vue";

export default {
    name: "membertable",
    components: {VSysMember, },
    setup() {
        // 表单loading: true,
        const isLoading = ref(true);
        // 表单输入框前长度
        const formLabelWidth = ref("170px");
        // 外置列表总页数
        const total = ref(0);
        // 用户查询条件
        const query = reactive({
            keyword: "", isStatus: "", pageNum: 1, pageSize: 10,
        });
        // 用户数据表
        const memberTableData = ref([]);
        // 公共 数据表多选临时存储
        let multipleTable = ref([]);
        let multipleSelectData =reactive([]);
        const drawerTabs = ref('member');
        // =========================================================================================================
        // 主业务处理 ========================================================================================= START
        /**
         * @name 公共 列表内选择数据
         * @description 勾选的回调函数，返回全部勾选值
         */
        const func_handleSelectionChange = (selections,param) => {
            multipleSelectData =selections;
        };
        /**
         * @name 公共 列表内全选数据
         * @description 勾选的回调函数，返回全部勾选值
         */
        const func_handleSelectionAll = (selections,param) => {
            multipleSelectData = selections;
        };
        /**
         * @name 获取主表格数据
         */
        const func_getData = () => {
            memberTableData.value= [];
            var t= setTimeout(function() {
                fetchMemberData(query).then((res) => {
                    memberTableData.value = res.data.list;
                    total.value = res.data.total;
                    isLoading.value = false;
                }).catch(() => { isLoading.value = false;});
            },1000);
        };
        func_getData();
        /**
         * @name 查询操作
         */
        const func_handleSearch = () => {
            isLoading.value = true;
            query.pageNum = 1;
            func_getData();
        };
        const func_switch_load = () => {
            isLoading.value = true;
            query.pageNum = 1;
            func_getData();
        };
        /**
         * @name 添加操作
         */
        const func_handleAddBut = () =>{
            VMemberData['load'] = false;
            VMemberData['id'] = 0;
            editDialogVisible.value = true;
        }
        /**
         * 标签内方法
         * @name 资源批量删除方法
         * @description 主按钮下拉的批量删除操作
         */
        const func_handleDelBut = (but,event) => {
            if(multipleSelectData.length ===0) {
                ElMessage.warning(ERROR_CHOOSE_DEL_MEMBER_EMPTY);
                return;
            }
            let _v = multipleSelectData.map((item) => item.id);
            func_del_data(_v);
        };
        /**
         * 标签内方法
         * @name 资源批量恢复方法
         * @description 主按钮下拉的批量恢复操作
         */
        const func_handleRecyclingBut = (but,event) => {
            if(multipleSelectData.length ===0) {
                ElMessage.warning(ERROR_CHOOSE_REC_MEMBER_EMPTY);
                return;
            }
            let _v = multipleSelectData.map((item) => item.id);
            func_rec_data(_v);
        };
        /**
         * 标签内方法
         * @name 角色批量激活方法
         * @description 主按钮下拉的批量删除操作
         */
        const func_handleActiveBut = (but,event) => {
            if(multipleSelectData.length ===0) {
                ElMessage.warning(ERROR_CHOOSE_ACT_MEMBER_EMPTY);
                return;
            }
            let _ids = multipleSelectData.map((item) => item.id);
            let _v = {
                ids: _ids, status: 2001
            };
            func_act_data(_v);
        };
        /**
         * 标签内方法
         * @name 角色批量停用方法
         * @description 主按钮下拉的批量删除操作
         */
        const func_handleUnActiveBut = (but,event) => {
            if(multipleSelectData.length ===0) {
                ElMessage.warning(ERROR_CHOOSE_UNACT_MEMBER_EMPTY);
                return;
            }
            let _ids = multipleSelectData.map((item) => item.id);
            let _v = {
                ids: _ids, status: 2002
            };
            func_act_data(_v);
        };
        /**
         * @name 分页导航
         */
        const func_handlePageChange = (val) => {
            isLoading.value = true;
            query.pageNum = val;
            func_getData();
        };
        /**
         * @name 分页数量查询
         */
        const func_handleSizeChange = (val) => {
            isLoading.value = true;
            query.pageNum = 1;
            query.pageSize = val;
            func_getData();
        }; 
        /**
         * @name 表格行内删除操作
         */
        const func_handleDelete = (index, row) => {
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {
                type: "warning",
            }).then(() => {
                let _v = [row['id']];
                func_del_data(_v);
            }).catch(() => {});
        };
        /**
         * @name 删除ID的数据
         */
        const func_del_data = (_data) => {
            batchDelMember(_data).then((res) => {
                if(res.data.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    ElMessage.success(SUCCMESS_DIALOG_MESSAGE);
                    isLoading.value = true;
                    func_getData(); // 刷新数据
                }
            }).catch(() => {});
        };
        /**
         * @name 回收ID的数据
         */
        const func_rec_data = (_data) => {
            batchRecMember(_data).then((res) => {
                if(res.data.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    ElMessage.success(SUCCMESS_DIALOG_MESSAGE);
                    isLoading.value = true;
                    func_getData(); // 刷新数据
                }
            }).catch(() => {});
        };
        /**
         * @name 激活关闭ID的数据
         */
        const func_act_data = (_data) => {
            batchActMember(_data).then((res) => {
                if(res.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    ElMessage.success(SUCCMESS_DIALOG_MESSAGE);
                    isLoading.value = true;
                    func_getData(); // 刷新数据
                }
            }).catch(() => {});
        };
        /**
         * @name 表格行内编辑操作
         */
        let idx = -1;
        const func_handleEdit = (index, row) => {
            idx =index;
            VMemberData['load'] = true;
            VMemberData['id'] = row['id'];
            editDialogVisible.value = true;
        };
        // 扩展业务处理 ========================================================================================= START
        const VMemberData = reactive({
            load: false,
            id: 0,
        });
        // 表格编辑时弹窗和保存
        const editDialogVisible = ref(false);
        const func_loadVMemberData = (v) => {
            if(v['state'] === 1){
                editDialogVisible.value = false;
                VMemberData['load'] = v['load'];
                func_getData();
            } else {
                editDialogVisible.value = true;
            }
        };
        // 扩展业务处理 ========================================================================================= END
        /**
         * ----------------------------------------------------抽屉内方法-------------------------------------------------*/
        // 抽屉展示区分
        const view_memberDrawer = ref(false);
        // 用户数据表
        const memberRoleTableData = ref([{
            id: 0,
            sid: '',
            username: '',
            phone: '',
            isAdministration:0,
            status:0,
            strCreateTime: '',
            strStatus: '',
            strIsAdministration: ''
        }]);
        const memberDrawerForm = reactive({
            id: 0,
            sid: "",
            username: "",
            nickname: "",
            phone: "",
            icon: "",
            gender: "",
            birthday: "",
            city: "",
            job: "",
            sourceType: "",
            createTime: "",
            wechatOpenId: "",
            strIssys: "",
            strStatus: "",
            strPhone: "",
            strOpenVIP: "",
        });
        /**
         * @name 打开弹出层
         */
        const func_handleDrawerOpen = (index, row) => {
            fetchMemberInfoData(row['id']).then((res)=>{
                Object.keys(memberDrawerForm).forEach((item) => {
                    memberDrawerForm[item] = res.data[item];
                });
            });
            view_memberDrawer.value=true;
        };
        /**
         * Drawer 标签内方法
         * @name 标签切换
         */
        const func_drawer_tabsClick = (tab,event)=>{
            if(tab.index == 1 ){
                func_handleRoleSearch(memberDrawerForm.sid)
            }
        };
        /**
         * @name 用户关联角色查询
         */
        const func_handleRoleSearch =(memberSid)=>{
            let _query = {sid : memberSid}
            fetchMemberRoles(_query).then((res) => {
                memberRoleTableData.value = res.data.data;
            }).catch(_ => {});
        };
        /**
         * ----------------------------------------------------初始化页面对象---------------------------------------------*/
        return {
            drawerTabs, formLabelWidth, isLoading, query, total, memberTableData, multipleTable, multipleSelectData, func_handleSelectionAll, func_handleSelectionChange,
            func_switch_load, func_getData, func_handleSearch, func_handlePageChange, func_handleSizeChange,
            func_handleAddBut, func_handleDelBut, func_handleDelete, func_handleEdit, func_handleActiveBut, func_handleUnActiveBut,
            func_handleRecyclingBut,
            func_rec_data, func_del_data, func_act_data,
            // 扩展业务处理 ========================================================================================= START
            view_memberDrawer, func_handleDrawerOpen, memberDrawerForm, func_drawer_tabsClick,
            func_handleRoleSearch, memberRoleTableData,
            // 扩展业务处理 ========================================================================================= END
            // 扩展业务处理 ========================================================================================= START
            editDialogVisible, VMemberData, func_loadVMemberData,
            // 扩展业务处理 ========================================================================================= END            
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}
.handle-switch {
    width: 180px;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.green {
    color: #67c23a;
}
.blue {
    color: #1684FC;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.overflowAuto {
    overflow-y: auto;
    position: absolute;
    width: 100%;
    height: 100%;
}
.overflowAuto::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.overflowAuto::-webkit-scrollerbar-thumb{
    background: rgb(224, 214, 235);
}
.cell-item {
  display: flex;
  align-items: center;
}
</style>